import {Table,Pagination} from 'antd';
import styles from './index.less';
import useStore from '@/context/useStore';
import { useEffect, useState } from 'react';
import { ISelectPageNumData } from '@/utils/manageInterface'
import React from 'react'
import Search from '@/components/search/search';

 interface Props{
   selectPageData: ISelectPageNumData[],
   total: number,
   changeanswer: (value: boolean) => void,
   pageChange: (value: number) => void,
   headChange: (value: number) => void,
   searchProblem: (value: string) => void,
}

const status = ['全部', '实训', '答辩', '面试','工作','其他'];
const Tabels:React.FC<Props> = ({selectPageData,total,changeanswer,pageChange,headChange,searchProblem}) => {
  const columns = [
    {
      title: '问题名称',
      dataIndex: 'questionTitle',
      width: 190,
      // render: (text: string) =>text,
    },
    {
      title: '类型',
      dataIndex: 'typeName',
    },
    {
      title: '发起人',
      dataIndex: 'author',
    },
    {
      title: '发起时间',
      dataIndex: 'createTime',
      render: (text: string) =>text.substr(0,10),
    },
    {
      title: '来源',
      dataIndex: 'source',
    },
  ];

  let [i, setI] = useState(0);
  const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
  let [filteredValue, setFilteredValue] = useState([]);

  useEffect(() => {
    
  },[])

   //头部状态切换
   function changeI(i: number) {
     setI(i)
     headChange(i)
  }
   //复选框变化
   function checkedChange(e: any) {
    setFilteredValue(e)
    // console.log(filteredValue, 3333)
  }
  return <div className={styles.tabels}>
      <div>
      <span>类型：</span>
        {
          status.map((item, ind) => {
            return <span key={ind} className={ind === i ? styles.active : ""} onClick={() => changeI(ind)}>{item}</span>
          })
        }
      </div>
      <div><Search changeanswer={changeanswer} searchProblem={searchProblem}/></div>
      <div>
           <Table
              rowSelection={{
                type: selectionType,
                // columnWidth:130,
                // columnTitle:<Checkbox onChange={onChange}>全选</Checkbox>,
                // ...rowSelection,
                onChange:checkedChange
              }}
              columns={columns}
              dataSource={selectPageData}
              pagination={false}
              rowKey="answerId"
            />
            <Pagination onChange={pageChange} defaultCurrent={1} total={total||1} className={styles.pagination} showQuickJumper={true}/>
      </div>
  </div>
}
export default Tabels;